{:W('Cate/header')}
{:W('Cate/left')}
<!--内容部分-->
<div class="content">
    <div class="title">
        <p>用户管理</p>
        <i class="icon-angle-right"></i>
        <p class="active">管理员列表</p>
    </div>
    <div class="admin_list clearfix">
        <div class="main">
            <div class="main_title">
                <form action="{:U('admin_list/admin_list')}" method="get">
                    <ul class="clearfix">
                        <li>
                            <span>用户名</span>
                            <input value="{$param.username}" maxlength="20"  name="username" type="text">
                        </li>
                        <li>
                            <span>手机号</span>
                            <input value="{$param.tel}" maxlength="11"  name="tel" type="text">
                        </li>
                        <button><img src="__PUBLIC__/images/seach.png">搜索</button>
                    </ul>
                </form>
            </div>
            <div class="main_list">
                <div class="main_list_new">
                    <button id="admin_list"><img src="__PUBLIC__/images/add_j.png">新增</button>
                </div>
                <div class="main_list_list device_list">
                    <dl>
                        <dt>
                            <span style="width:5%;">序号</span>
                            <span style="width:20%;text-align:left;padding-left:20px;">账号</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">用户名</span>
                            <span style="width:20%;text-align:left;padding-left:20px;">管理区域</span>
                            <span style="width:15%">联系电话</span>
                            <span style="width:15%">邮箱</span>
                            <span style="width:10%">操作</span>
                        </dt>
                        <volist name="array['accounts']" id='row' key="k">
                        <dd>
                            <span style="width:5%;">{$k}</span>
                            <span style="width:20%;text-align:left;padding-left:20px;">{$row['username']}</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">{$row['markname']}</span>
                            <span style="width:20%;text-align:left;padding-left:20px;">{$row['areas']}</span>
                            <span style="width:15%">{$row['tel']}</span>
                            <span style="width:15%">{$row['email']}</span>
                            <span style="width:10%;">
                                    <a href="javascript:;" class="cz" data-json='{$row|json_encode}'>重置密码</a>
                                    <a href="javascript:;" class="xg" data-json='{$row|json_encode}'>修改</a>
                                    <a href="javascript:;" onclick="del_user('{$row.id}','{$row.username}')">删除</a>
                                </span>
                        </dd>
                        </volist>
                    </dl>
                </div>
            </div>
            <div class="fy" id="page"></div>
        </div>
    </div>
</div>

<!--弹框-->
<!--新增客户-->
<div class="hk"></div>
<div class="add_group admin_list_box2">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">新增区域管理员
    </div>
    <div class="add_group_center">
        <ul>
            <li>
                <span>
                    <i>*</i>账号 :
                </span>
                <input value="" name="username" maxlength="20" type="text">
            </li>
            <li>
                <span>
                    <i></i>用户名 :
                </span>
                <input value="" name="markname" maxlength="20" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>管理区域 :
                </span>
                <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                <input value="" id="qy_list" name="manageareaids" type="text" readonly placeholder="请选择">
                <div class="list" style="display: none;">
                    <div class="end_btn">
                        <label>
                            <input type="checkbox" value="" name="box">
                            全选
                        </label>
                        <button>确定</button>
                    </div>
                    <ul class="clearfix" style="display: block;padding-left:0;height:195px;overflow-y: auto;"></ul>
                </div>
            </li>
            <li>
                <span>
                    <i>*</i>手机号 :
                </span>
                <input value="" name="tel" maxlength="11" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>邮箱 :
                </span>
                <input value="" name="email" type="text">
            </li>
            <li >
                <span>
                    <i>*</i>密码 :
                </span>
                <input value=""  name="passwd" maxlength="30" type="password" >
            </li>
            <li>
                    <span>
                        <i>*</i>确认密码 :
                    </span>
                <input value=""  name="cpasswd" maxlength="30" type="password">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
<!--修改-->
<div class="add_group admin_list_box">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">修改区域管理员
    </div>
    <div class="add_group_center">
        <ul>
            <li>
                <span>
                    <i>*</i>账号 :
                </span>
                <input value="" name="username" disabled maxlength="20" type="text">
            </li>
            <li>
                <span>
                    <i></i>用户名 :
                </span>
                <input value="" name="markname"  maxlength="20" type="text">
            </li>
            <li class="clearfix">
                <span>
                    <i>*</i>管理区域 :
                </span>
                <input value="" name="manageareaids"  disabled type="text">
            </li>
            <li>
                <span>
                    <i>*</i>手机号 :
                </span>
                <input value="" name="tel" maxlength="11" type="text">
            </li>
            <li>
                <span>
                    <i>*</i>邮箱 :
                </span>
                <input value="" name="email" type="text">
            </li>
            <li>
                    <span>
                        <i>*</i>密码：
                    </span>
                <input value="" name="passwd" maxlength="30" type="password">
            </li>
            <li>
                    <span>
                        <i>*</i>确认密码：
                    </span>
                <input value=""  name="cpasswd" maxlength="30" type="password">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
<div class="add_group xg_user_password">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">重置密码
    </div>
    <div class="add_group_center">
        <ul>
            <li>
                    <span>
                        <i>*</i>新密码：
                    </span>
                <input value=""  name="passwd"  type="password">
            </li>
            <li>
                    <span>
                        <i>*</i>确认密码：
                    </span>
                <input value="" name="cpasswd"  type="password">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
</body>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'page'
            ,count: "<?php echo $totnum; ?>"
            ,limit: "<?php echo $pagecount; ?>"
            ,layout: ['prev', 'page', 'next', 'limit', 'skip']
            ,curr:function(){
                var page = location.search.match(/pageid=(\d+)/);
                return page ? page[1] : 1;
            }()
            ,jump: function(obj,first){  //点击页码出发的事件
                if(first!=true){  //是否首次进入页面
                    var username = "<?php echo $param['username']; ?>";
                    var tel = "<?php echo $param['tel']; ?>";
                    var _url = "/admin_list/admin_list?pageid="+obj.curr+"&pagecount="+obj.limit;
                    if(username || tel){
                        _url = "/admin_list/admin_list?pageid="+obj.curr+"&pagecount="+obj.limit+"&username="+username+"&tel="+tel;
                    }
                    window.location.href = _url;
                }
            }
        });
    });


    $(document).ready(function () {
        //添加
        getPopup($('#admin_list'),$('.admin_list_box2'));
        //修改
        $('.main_list').find('.xg').each(function () {
            var _this = $(this);
            getPopup(_this,$('.admin_list_box'));
        });

        //修改
        $('.main_list').find('.cz').each(function () {
            var _this = $(this);
            getPopup(_this,$('.xg_user_password'));
        });

        //全选
        selectCheckBox('input[name="checkbox"]','input[name="check"]');
        //全选
        selectCheckBox('input[name="box"]','input[name="boxcheck"]');
        // 修改管理区域的下拉框展示
        $('#qy_list,.icon-sort-down').on('click',function(){
            if($('.list').is(':hidden')){
                $('.list').attr('style','display:block;');
            }  else {
                $('.list').attr('style','display:none;');
            }
        })

        // 点击确定
        ids = '';   // 选中区域的id字符串，全局变量
        $('.end_btn button').on('click',function(){
            // 获取选中的区域参数
            var _checked = $('.list input[name="boxcheck"]:checked');
            var _text = '';
            if(_checked.length){
                _checked.each(function(){
                    _text += $(this).parent().text()+'；';
                    ids += $(this).val()+',';
                })
            }
            $('#qy_list').val(_text);
            $('.list').attr('style','display:none;');
        })

        // 获取区域列表
        $.post("{:U('user_list/getArea_list')}",{},function(data){
            if(data.result == '0'){
                var _listUl = $('.list > ul');
                _listUl.empty();  // 清空
                for(var i in data.areas){
                    var _listLi = '<li style="border-bottom:1px solid #ccc;padding-left:10px;"><input type="checkbox" value="'+data.areas[i]['id']+'" name="boxcheck">'+data.areas[i]['name']+'</li>';
                    _listUl.append(_listLi);
                }
            } else {
                layer.msg(data.msg,{icon:2,time:2000});
            }
        })

        // 点击新增按钮，所属区域弹出框隐藏
        $('#admin_list').on('click',function(){
            $('.list').hide();
        })

        // 新增用户
        $('.admin_list_box2 .add_group_btn button').eq(0).on('click',function(){
            // 获取数据
            var _class = '.admin_list_box2';
            var _conf = get_data(_class);
            if(!_conf){
                return false;
            }
            $.post("{:U('admin_list/AddUser_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('新增用户成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 获取编辑用户的基本信息
        $('.main_list').find('.xg,.cz').on('click',function(){
            var _json = $(this).attr('data-json');
            _json = JSON.parse(_json);
            if($(this).has('.xg')){
                var _areatext = '';
                for(var i in _json.manageareas){
                    _areatext += _json.manageareas[i]['areaname']+'；';
                }
                var _admin_list_box = $('.admin_list_box');
                _admin_list_box.find('input[name="username"]').val(_json.username);
                _admin_list_box.find('input[name="markname"]').val(_json.markname);
                _admin_list_box.find('input[name="manageareaids"]').val(_areatext);
                _admin_list_box.find('input[name="tel"]').val(_json.tel);
                _admin_list_box.find('input[name="email"]').val(_json.email);
            }
            user_id = _json.id;  // 全局
        })

        // 编辑用户
        $('.admin_list_box .add_group_btn button').eq(0).on('click',function(){
            // 获取数据
            var _class = '.admin_list_box';
            var _conf = get_data(_class);
            if(!_conf){
                return false;
            }
            _conf['accountiddst'] = user_id;
            $.post("{:U('admin_list/modifyUser_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('修改用户成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 重置密码
        $('.xg_user_password button').eq(0).on('click',function(){
            // 获取数据
            var _class = '.xg_user_password';
            var _conf = get_data(_class);
            if(!_conf){
                return false;
            }
            _conf['accountiddst'] = user_id;
            $.post("{:U('Client/addClient_post')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('重置密码成功！',{icon:1,time:2000},function(){
                        close();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

    })

    // 删除用户
    function del_user(obj,name)
    {
        if(!$.trim(obj)){
            layer.msg('缺少参数！',{icon:2,time:2000});
            return;
        }
        var _length = $('.device_list dd').length;
        layer.confirm('<font style="color: red;">*</font> 确认要删除'+name+'用户吗！',function(index){
            $.post("{:U('admin_list/delUser_post')}",{accountiddst:obj},function(data){
                if(data.result == '0'){
                    layer.msg('删除用户成功！',{icon:1,time:2000},function(){
                        var _layui_input = $('.layui-laypage-skip .layui-input');
                        if(_length <= 1 && _layui_input.val() > 1){   // 获取上一页
                            _layui_input.val(_layui_input.val()-1);
                            $('#page .layui-laypage-btn').click();
                        } else {   // 刷新当前页
                            location.reload();
                        }
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })
    }

    // 获取提交数据
    function get_data(obj)
    {
        var _input = $(obj).find('input').not('[disabled]');
        if(obj == '.admin_list_box2'){
            _input = $(obj).find('input').not('[type="checkbox"]');
        }
        var _conf = {};
        _input.each(function(i){
            if(_input.eq(i).attr('name') == 'manageareaids'){
                _conf[_input.eq(i).attr('name')] = ids;
            } else {
                _conf[_input.eq(i).attr('name')] = _input.eq(i).val();
            }
        })
        // 验证数据
        for(var i in _conf){
            if(!$.trim(_conf[i])){
                layer.msg('请把表单填写完整！',{icon:2,time:2000});
                return false;
            }
            // 用户名限制
            if(i == 'username'){
                var _checkName = /^[a-zA-Z0-9]{1,20}$/;
                if(!_checkName.test(_conf['username'])){
                    layer.msg('用户名由1-20位的英文字母组成！',{icon:2,time:2000});
                    return false;
                }
            }
            // 手机号
            if(i == 'tel'){   // 验证手机号
                var _checkTel =  /^1\d{10}$/;
                if(!_checkTel.test(_conf['tel'])){
                    layer.msg('手机号格式错误！',{icon:2,time:2000});
                    return false;
                }
            }
            if(i == 'email'){   // 验证手机号
                var _checkEmail =  /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if(!_checkEmail.test(_conf['email'])){
                    layer.msg('邮箱格式错误！',{icon:2,time:2000});
                    return false;
                }
            }
            // 密码验证
            if(i == 'passwd'){
                var _checkPass = /^\w{6,18}$/;
                if(!_checkPass.test(_conf['passwd'])){
                    layer.msg('密码由6-18位字母、数字、下划线组成！',{icon:2,time:2000});
                    return false;
                }
            }
            // 密码一致性验证
            if(i == 'cpasswd'){
                if(_conf['passwd'] != _conf['cpasswd']){
                    layer.msg('确认密码和密码不一致！',{icon:2,time:2000});
                    return false;
                }
            }
        }
        return _conf;
    }

</script>
</html>